<template>
    <div class="v-select-checkbox">
        <el-popover
            ref="popover1"
            trigger="click">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" v-if="!max">
                全选
            </el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox v-for="(city, index) in dataOptions" :label="city[labelText]" v-model="city.isSelect"
                         :key="city[valueKey]" @change="handleCheckedOptionsChange(index)">{{ city[labelText] }}
            </el-checkbox>
        </el-popover>
        <el-button v-popover:popover1 style="max-width: 1000px;">
      <span v-if="closable" style="display: inline-block; line-height: 28px;">
        <span v-if="checkedOptions.length > 0">
          <el-tag
              v-if="tag.isSelect"
              v-for="(tag,index) in dataOptions"
              :key="tag[valueKey]"
              @close="close(index)"
              closable size="mini">
            {{ tag[labelText] }}
          </el-tag>
        </span>
        <span v-if="checkedOptions.length === 0">
          请选择
        </span>
        <i class="el-icon-caret-bottom"></i>
      </span>
            <template v-else>
                <span v-if="checkedOptions.length === 0">请选择</span>
                <span v-if="checkedOptions.length > 0"> 选中{{ checkedOptions.length }}</span>
                <i class="el-icon-caret-bottom"></i>
            </template>
        </el-button>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        name: 'v-select-check-box',
        props: {
            // 最多选几个
            max: {
                type: Number
            },
            options: {
                type: Array
            },
            // 显示的文字
            labelText: {
                type: String,
                default: 'label'
            },
            // 值
            valueKey: {
                type: String,
                default: 'value'
            },
            resultType: {
                type: String,
                default: 'value'
            },
            // 是否可以关闭
            closable: false
        },
        data () {
            return {
                checkAll: false,
                checkedOptions: [],
                dataOptions: this.options,
                isIndeterminate: false
            }
        },
        watch: {
            checkedOptions: {
                handler: function () {
                    let result = this.checkedOptions.map((item) => {
                        if (this.resultType === 'value') {
                            return item[this.valueKey]
                        } else {
                            return item
                        }
                    })
                    this.$emit('change', result)
                },
                deep: true
            }
        },
        methods: {
            close (index) {
                this.dataOptions[index].isSelect = false
                this.handleCheckedOptionsChange()
            },
            handleCheckAllChange (val) {
                if (val) {
                    this.dataOptions = this.dataOptions.map((item) => {
                        item.isSelect = true
                        return item
                    })
                } else {
                    this.dataOptions = this.dataOptions.map((item) => {
                        item.isSelect = false
                        return item
                    })
                }
                this.handleCheckedOptionsChange()
                this.isIndeterminate = false
            },
            handleCheckedOptionsChange (index) {
                this.checkedOptions = this.dataOptions.filter((item) => {
                    return item.isSelect === true
                })
                if (this.checkedOptions.length - 1 === this.max) {
                    this.dataOptions[index].isSelect = false
                    return
                }
                let checkedCount = this.checkedOptions.length
                this.checkAll = checkedCount === this.dataOptions.length
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataOptions.length
            }
        },
        created () {
            this.dataOptions = this.options.map((item) => {
                item['isSelect'] = false
                return item
            })
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .v-select-checkbox
        .el-button
            padding 0 10px
            height 30px
            .el-tag--mini[data-v-5bad4165]
                margin 4px 5px

    .el-checkbox + .el-checkbox
        margin 10px 0

    .el-checkbox
        display block

    .el-tag--mini
        margin 5px;
        display block
        float left
</style>
